<template>
  <el-card>
    <h2 style="text-align: center;">金融信贷管理系统</h2>
    <el-form @submit.prevent="handleRegister">
      <el-form-item label="用户名:" required>
        <el-input v-model="username" placeholder="请输入用户名" /></el-form-item>
      <el-form-item label="密码:" required>
        <el-input type="password" v-model="password" placeholder="请输入密码" /></el-form-item>
      <el-form-item label="确认密码:" required>
        <el-input type="password" v-model="confirmPassword" placeholder="请确认密码" /></el-form-item>
      <el-form-item label="手机号:" required>
        <el-input v-model="phone" placeholder="请输入手机号" /></el-form-item>
      <el-form-item label="邮箱:" required>
        <el-input v-model="email" placeholder="请输入邮箱" /></el-form-item>
      <el-form-item label="验证码:" required>
        <el-input v-model="verificationCode" placeholder="请输入验证码" /></el-form-item>
      <div style="text-align: center;">
        <el-button type="primary" @click="handleRegister">注册</el-button>
        <el-button type="text" @click="goToLogin">去登录</el-button>
      </div>
    </el-form>
  </el-card>
</template>

<script>
import { useRouter } from 'vue-router';

export default {
  setup() {
    const router = useRouter();
    const goToLogin = () => {
      router.push('/login');
    };
    return { goToLogin };
  },
  data() {
    return {
      username: '',
      password: '',
      confirmPassword: '',
      phone: '',
      email: '',
      verificationCode: '',
    };
  },
  methods: {
    handleRegister() {
      // 处理注册逻辑
      if (this.password !== this.confirmPassword) {
        console.error('密码不匹配');
        return;
      }
      console.log('注册用户:', this.username);
      console.log('手机号:', this.phone);
      console.log('邮箱:', this.email);
      console.log('验证码:', this.verificationCode);
    },
  },
};
</script>

<style scoped>
.el-card {
  max-width: 400px;
  margin: 20px auto;
  padding: 20px;
}

body {
  background-color: #f0f2f5;
}
</style> 